<template>

  <div>
    <div class="background-white system-layout">
      <div class="is-open">
        <p>开启分配规则</p>
        <div class="sw">
          <el-switch
            @change="shiftIsOpen"
            v-model="isOpen"
            active-color="rgba(24, 144, 255, 1)"
            inactive-color="rgba(0, 0, 0, 0.247058823529412)">
          </el-switch>
        </div>
      </div>
      <div class="is-open-list" v-if="isOpen">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 B"></el-checkbox>
          <el-checkbox label="复选框 C"></el-checkbox>
          <el-checkbox label="复选框 D"></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="background-white" style="margin-top: 16px">
      <div class="system-layout">
        <p class="seo-title">SEO优化</p>
        <div class="seo-body">
          <p><span>网页关键字:</span></p>
          <el-input v-model="keyword" placeholder="请输入关键字" style="width: 416px;"></el-input>
        </div>
        <div class="seo-body">
          <p><span>网页描述:</span></p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 18}"
            placeholder="请输入网页描述"
            v-model="des"
            style="width: 416px;"
          >
          </el-input>
        </div>
        <div class="seo-body" style="margin-left: 100px">
          <el-button type="primary" size="mini">保存</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {mapMutations, mapState} from 'vuex'


  export default {
    layout: 'frame',
    name: "index",
    components: {},
    data() {
      return {
        breadTitle: '系统配置',
        isOpen: true,
        checkList: ['复选框 A'],
        keyword: '',
        des: ''
      }
    },
    beforeUpdate() {
      this.initInfo()
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),

    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath'
      ]),
      //初试化
      initInfo() {
        this.SetIsShowBread(true);  //设置面包屑导航是否显示

        //面包屑显示后内容
        if (this.isShowBread) {
          this.SetCurrentPath({url: '/', title: this.breadTitle});
        }
      },
      shiftIsOpen(v) {
        this.isOpen = v;
      }
    },
  }
</script>

<style lang="scss">
  .system-layout {
    padding: 19px 0 24px 15px;
  }

  .is-open {
    display: flex;
    flex-direction: row;
    align-items: center;

    p {
      font-size: 16px;
      color: #333333;
      margin-right: 9px;
    }
  }

  .is-open-list {
    margin-top: 30px;
  }

  .seo-title {
    font-size: 16px;
    color: #333333;
  }

  .seo-body {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;

    p {
      width: 100px;
    }
  }

</style>
